<template>
    <view class="work-order"   :class="{'h-right-active2':isShowFlag}">
        <!-- wifi内容 --> 
        <view class="head-wifi" style="height:3%">
            <view class="head-wifi-left">
                <image class="wifi-image" :src="wifiStatueImg" alt="">
                <text class="wifi-title">{{wifiStatue}}</text>
            </view>
            <view>
                <text class="wifi-time">最后一次更新时间：{{dateFormat(wifiTime)}}</text>
            </view> 
        </view>
        <!-- 工单统计内容 -->
        <view class="tickets" style="height:13%">
            <view class="head">
                <view class="left">
                    <image class="image" src="/static/title-left.png" alt="">
                    <text class="title">工单统计</text>
                </view>
            </view>
            <view class="content" style="">
                <view class="content-list">
                    <view class="content-item">
                        <image class="icon-image" src="/static/workR/yh-icon.png" alt="">
                        <view class="tickets-list">
                            <text class="tickets-num">{{hiddenDangerNum}}</text>
                            <text class="tickets-title">隐患</text>
                        </view> 
                    </view>
                    <view class="content-line"></view>
                    <view class="content-item">
                        <image class="icon-image" src="/static/workR/xj-icon.png" alt="">
                        <view class="tickets-list">
                            <text class="tickets-num">{{inspectNum}}</text>
                            <text class="tickets-title">巡检</text>
                        </view> 
                    </view>
                    <view class="content-line"></view>
                    <view class="content-item">
                        <image class="icon-image" src="/static/workR/wx-icon.png" alt="">
                        <view class="tickets-list">
                            <text class="tickets-num">{{serviceNum}}</text>
                            <text class="tickets-title">维修</text>
                        </view> 
                    </view>
                    
                </view>
            </view>  
        </view>

        <!-- 待处理隐患内容 -->
        <view class="hidden-danger" style="height:22%">
            <view class="head">
                <view class="left">
                    <image class="image" src="/static/title-left.png" alt="">
                    <text class="title">待处理隐患</text>
                </view>
                <view class="hidden-right">
                   <view class="hidden-btn" :class="hiddenFlag?'hidden-btn-check':'hidden-btn-out'" @click="changeHiddenFlag(1)">
                      <image class="hidden-image" src="/static/workR/ssgz.png" alt="">
                      <text class="hidden-title">设施故障</text>
                   </view>
                   <view class="hidden-btn" :class="hiddenFlag?'hidden-btn-out':'hidden-btn-check'"  @click="changeHiddenFlag(2)">
                      <image class="hidden-image" src="/static/workR/sbgj.png" alt="">
                      <text class="hidden-title">设备告警</text>
                   </view>
                </view>
            </view>
            <view class="content" style="height:80%;overflow: hidden;">
            <!-- 列表 -->
            <view class="pendingWarp" >
            <view v-if="listLoading" style="  text-align: center;">加载中...</view>

              <view
                v-if="pendingList!==null&&pendingList.length>0" 
               >
                <view v-for="(item,index) in pendingList" :key="index">
                   <view v-if="item.actNodeCode !== 'finish'" class="pendingList">
                  <view class="pendingListTitle">
                    <view v-if="hiddenFlag">
                    <view class="pendingListTitleName"> {{ item.facilityTypeName }}</view>
                      <view class="pendingListTitleId"> {{ 'ID:'+item.facilityNo }}</view>
                    </view>
                    <view  v-if="hiddenFlag==false">
                     <view class="pendingListTitleName"> {{ item.deviceTypeName }}</view>
                      <view class="pendingListTitleId"> {{ 'ID:'+item.deviceCode }}</view>
                    </view>
                  <view  class="pendingListTitleBtn" @click="disposal(hiddenFlag,item)">去处理</view>
                  </view>
                  <view class="pendingListCenter">
                    <view class="pendingListItem" v-if="hiddenFlag==false"> 
                     
                      <view >
                        <view class="pendingListItemName">
                           {{ '设备状态' }}
                        </view>
                        <view class="pendingListItemMsg" style="color:rgba(255, 61, 61, 1)">
                           {{ item.deviceStatusName||'- -' }} 
                        </view>
                      </view>
                    </view>
                    <view class="pendingListItem"> 
                     
                      <view >
                        <view class="pendingListItemName">
                          {{ '隐患上报人' }}
                        </view>
                        <view class="pendingListItemMsg">
                          {{ item.createUserName ||'- -' }}  
                        </view>
                      </view>
                    </view>
                    <view class="pendingListItem">
                      
                      <view  v-if="hiddenFlag">
                        <view class="pendingListItemName">
                          {{ '设施分布' }}
                        </view>
                        <view class="pendingListItemMsg">
                          {{ item.inoutFlagName||'- -' }}
                        </view>
                      </view>
                     
                    </view>
                    <view  class="pendingListItem">
                         <view class="pendingListItemName">
                        {{ '上报时间' }}
                      </view>
                      <view class="pendingListItemMsg">
                        {{ item.createTime||'- -' }}
                      </view>
                    </view>
                  </view>
                  <view v-if="hiddenFlag" class="pendingListFoot">
                    <image class="imageFoot" src="/static/workR/dw.png" alt=""><text class="footText">{{ item.locationDesc||'- -' }}</text>
                  
                  </view>
                  <view v-if="hiddenFlag==false" class="pendingListFoot">
                    <image class="imageFoot" src="/static/workR/dw.png" alt=""><text>{{ item.address ||'- -'}}</text>
                  
                  </view>
                </view>
                </view>
                <!-- 数据缓存加载 -->
                <view v-if="loading" style="color: #fff;text-align: center">加载中...</view>
                <view v-if="noMore"></view>
              </view>
              <view class="no-data-list" v-if="listLoading==false&&pendingList.length==0" >
                  <image class="no-data-image" src="/static/img/no-alarm.png" alt="">  
                  <view v-if="hiddenFlag==true" class="no-data">暂无设备告警 </view> 
                  <view v-if="hiddenFlag==false" class="no-data"> 暂无设施故障</view>
              </view>
            </view> 
            </view>  
        </view>
        <!-- 待巡检任务内容 -->
        <view class="hidden-danger"  style="height:32%">
            <view class="head">
                <view class="left">
                    <image class="image" src="/static/title-left.png" alt="">
                    <text class="title">待巡检任务</text>
                </view>
                <view class="hidden-right">
                   <view class="hidden-btn" :class="hiddenFlag2?'hidden-btn-check':'hidden-btn-out'" @click="changeHiddenFlag2(1)">
                      <image class="hidden-image" src="/static/workR/sn.png" alt="">
                      <text class="hidden-title">室内路线</text>
                   </view>
                   <view class="hidden-btn" :class="hiddenFlag2?'hidden-btn-out':'hidden-btn-check'"  @click="changeHiddenFlag2(2)">
                      <image class="hidden-image" src="/static/workR/sw.png" alt="">
                      <text class="hidden-title">室外路线</text>
                   </view>
                </view>
            </view>
            <view class="content" style="height:85%;overflow: hidden;">
            <view class="pendingWarp" style="height:100%">
           <view v-if="listLoading2" style=" text-align: center;">加载中...</view>

            <view v-if="interiorList!==null&&interiorList.length>0" >
              <view v-for="(item,index) in interiorList" :key="index" >
                  <view v-if="parseInt(item.donePercent)!==100" class="pendingList">
                <view class="pendingListTitle">
                  <view>
                    <view class="pendingListTitleName"> {{ item.lineName }}</view>
                    <view class="pendingListTitleId"> {{ 'ID:'+item.taskNo }}</view>
                  </view>
                  <view class="pendingListTitleFinish">
                    
                    <text class="textFinish" style=" ">完成率</text>
                    <view class="finishMain">
                        
                          <el-progress
                            type="circle"
                            :percentage="parseInt(item.donePercent)"
                            :width="48"
                            class="circle0"
                           
                            :format="format"
                          ></el-progress>
                          <svg width="0" height="0">
                            <defs>
                              <linearGradient
                                id="write"
                                x1="0%"
                                y1="0%"
                                x2="100%"
                                y2="0%"
                              >
                                <stop
                                  offset="0%"
                                  style="stop-color: #00DFEF"
                                  stop-opacity="0.9"
                                ></stop>
                                <stop
                                  offset="100%"
                                  style="stop-color:#007CFF"
                                  stop-opacity="1"
                                ></stop>
                              </linearGradient>
                            </defs>
                          </svg>
                    </view>
                  </view>
                </view>
                <view class="pendingListCenter" >
                  <view class="pendingListItem">
                    <view class="pendingListItemMsg2" style="color:#02C3FF;">
                      {{ item.allTotal }}    <text>个</text>
                    </view>
                    <view class="pendingListItemName">
                      {{ '任务数量' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemMsg2" style="color:#00FFC4;">
                      {{ item.doneTotal }}    <text>个</text>
                    </view>
                    <view class="pendingListItemName">
                      {{ '已检数量' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemMsg2" style="color:#FEA940;">
                      {{ item.skipTotal }}    <text>个</text>
                    </view>
                    <view class="pendingListItemName">
                      {{ '跳过数量' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemMsg2" style="color:  #FF3D3D;">
                      {{ item.todoTotal }}    <text>个</text>
                    </view>
                    <view class="pendingListItemName">
                      {{ '未检数量' }}
                    </view>
                  </view>
                </view>
                <view class="pendingListFoot">
                  <view class="footTop">
                    <view style="margin-bottom:0.08rem"><text>巡检时间： </text>{{ item.dateTimeInterval}}</view>
                    <view><text>计划完成时间： </text>{{ item.planFinishTime }}</view>
                  </view>
                  <view class="footBottom"  >
                    <view>
                      <image src="/static/workR/xj.png" alt=""><text>{{ item.groupName ||'- -' }}</text>
                    </view>
                    <view style="display:flex">

                    <view  v-if="hiddenFlag2==false" style="color:rgba(2, 195, 255, 1);cursor: pointer; margin-right:0.4rem;font-size: 0.15rem;" @click="inspection(item)">
                      <image style="height:0.25rem;width:0.25rem" src="/static/workR/xjgj.png" alt="">巡检轨迹
                    </view>
                    <view style="color:rgba(2, 195, 255, 1);cursor: pointer;font-size: 0.15rem;" @click="detailShow(item)">
                      <image style="height:0.25rem;width:0.25rem" src="/static/workR/rw.png" alt="">巡检任务明细
                    </view>
                    </view>
                    
                  </view>
                </view>
              </view>
              </view>
              <!-- 数据缓存加载 -->
              <view v-if="loading2" style="color: #fff;text-align: center">加载中...</view>
              <view v-if="noMore2"></view>
            </view>
             <view class="no-data-list"  v-if="listLoading2==false&& interiorList.length==0" >
                  <image class="no-data-image" src="/static/img/no-alarm.png" alt="">  
                  <view v-if="hiddenFlag2==true" class="no-data">暂无室内路线任务 </view> 
                  <view v-if="hiddenFlag2==false" class="no-data">暂无室外路线任务</view>
              </view>
            </view>
            </view>  
        </view>
        
            <!-- 待处理工单内容 -->
        <view class="hidden-danger" style="height:20%">
            <view class="head">
                <view class="left">
                    <image class="image" src="/static/title-left.png" alt="">
                    <text class="title">待处理工单</text>
                </view>
                <view class="hidden-right">
                   <view class="hidden-btn" :class="hiddenFlag3?'hidden-btn-check':'hidden-btn-out'" @click="changeHiddenFlag3(1)">
                      <image class="hidden-image" src="/static/workR/wx.png" alt="">
                      <text class="hidden-title">故障维修</text>
                   </view>
                   <view class="hidden-btn" :class="hiddenFlag3?'hidden-btn-out':'hidden-btn-check'"  @click="changeHiddenFlag3(2)">
                      <image class="hidden-image" src="/static/workR/wb.png" alt="">
                      <text class="hidden-title">日常维保</text>
                   </view>
                </view>
            </view>
            <view class="content" style="height:80%;overflow: hidden;">
            <view class="pendingWarp" >
               <view v-if="listLoading3" style="  text-align: center;">加载中...</view>
              <view
                v-if="workOrderList!==null&&workOrderList.length>0">
                <view v-for="(item,index) in workOrderList" :key="index" class="pendingList">
                  <view class="pendingListTitle">
                    <view v-if="hiddenFlag3">
                      <view class="pendingListTitleName" style="width: 3.46rem; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> 
                        {{ '故障维修工单号 : ' +item.wbOrderCode }}
                        </view>
                     
                    </view>
                    <view  v-if="hiddenFlag3==false" >
                      <view class="pendingListTitleName"> {{ '社会单位 : ' +item.deptName }}</view>
                      <view class="pendingListTitleName2" style=""> {{ '维保合同名称 : ' +item.contractName }}</view>
                    </view>
                  <view v-if="hiddenFlag3" class="pendingListTitleBtn" @click="disposal2(hiddenFlag3,item)">去处理</view>
                  <view  v-if="hiddenFlag3==false" class="pendingListTitleBtnL" >
                    <view  class="pendingListTitleBtn" @click="disposal2(hiddenFlag3,item)">配置维保</view>
                    <view  class="pendingListTitleBtn" @click="disposal3(hiddenFlag3,item)">添加维保记录</view>
                  </view>
                  </view>
                  <view v-if="hiddenFlag3" class="pendingListCenter">
                  <view  v-if="item.map.report.reportType==1" class="pendingListItem">
                    <view class="pendingListItemName" >
                      {{ '设备类型' }}
                    </view>
                    <view class="pendingListItemMsg" style="width:1rem;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;word-break: break-all;">
                      {{item.map.report.deviceTypeName||'- -' }}
                    </view>
                  </view>
                  <view v-if="item.map.report.reportType==2"  class="pendingListItem">
                    <view class="pendingListItemName" >
                      {{ '设施类型' }}
                    </view>
                    <view class="pendingListItemMsg" style="width:1rem;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;word-break: break-all;">
                      {{item.map.report.facilityTypeName ||'- -' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '上报人' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{ item.reportUserName||'- -' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '上报时间' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{ item.reportTime||'- -' }}
                    </view>
                  </view>
                </view>
                <view  v-if="hiddenFlag3==false" class="pendingListCenter">
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '维保人员' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{item.userNames&&item.userNames.length?item.userNames[0]:'- -' }}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '维保周期' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{ item.intval +'个月' ||'- -'}}
                    </view>
                  </view>
                  
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '提醒时间' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{ item.notifyDateName ||'- -'}}
                    </view>
                  </view>
                  <view class="pendingListItem">
                    <view class="pendingListItemName">
                      {{ '计划维保时间' }}
                    </view>
                    <view class="pendingListItemMsg">
                      {{ item.nextTime ||'- -'}}
                    </view>
                  </view>
                </view>
                  <view  class="pendingListFoot"  v-if="hiddenFlag3">
                    <view class="reportFoot">
                    <image class="imageFoot" src="/static/workR/dw.png" alt="">
                      <view v-if="item.map.report.reportType==2">
                      <text >{{ item.map.report.locationDesc || "- -" }}</text>
                    </view>
                    <view v-if="item.map.report.reportType==1">
                      <text>{{ item.map.report.addressDesc || "- -" }}</text>
                    </view>
                    </view>
                  </view>
                  <view  class="pendingListFoot"  v-if="hiddenFlag3==false">
                    
                  </view>
                </view>
                <!-- 数据缓存加载 -->
                <view v-if="loading3" style="color: #fff;text-align: center">加载中...</view>
                <view v-if="noMore3"></view>
              </view>
              <view class="no-data-list"  v-if="listLoading3==false&& workOrderList.length==0" >
                  <image class="no-data-image" src="/static/img/no-alarm.png" alt="">  
                  <view v-if="hiddenFlag3==true" class="no-data">暂无故障维修工单 </view> 
                  <view v-if="hiddenFlag3==false" class="no-data">暂无维保工单</view>
              </view>
            </view> 
            </view>  
        </view>
         <!--设施故障 事件处理 -->
        <facilities-failure-handle :history="history" :detail="detail" :step="step"  :visible.sync="showHandleDialog" @success="getFindFacilityOrderPage"/>
         <!--设备告警 事件处理 -->
        <device-alarm-handle :history="history" :detail="detail" :step="step" :visible.sync="showHandleDialog2" @success="getFindDeviceOrderPage"/>
        <!-- 巡检任务明细 -->
        <taskDetail :show.sync="taskFlag" :tasktype="taskRadio" :taskId="taskId" :deptId="deptId" />
         <!-- 处理工单 -->
        <failureDetailDialog
          ref="detailDialogOne"
          :visible.sync="showDetailDialog"
          :status="status"
          :detail="detail2"
          :WbOrderCodeId="wbOrderCode"
          @success="getUnAssignWorkOrder"
        />
          <!-- 日常维保记录弹框 -->
         <el-dialog :visible.sync="showLogDialog" title="添加日常维保记录" width="7.5rem" :close-on-press-escape="false" :close-on-click-modal="false" :append-to-body="true">
           <div class="dialog-form-container">
             <el-form class="dialog-form" ref="logForm" size="mini" :rules="logRules" :model="logParams" label-position="left" label-width="1.5rem">
               <el-form-item label="社会单位" required>
                 <div class="gray-color">{{currentRow.deptName}}</div>
               </el-form-item>
               <el-form-item label="维保工作内容" prop="content">
                 <el-input type="textarea" v-model="logParams.content" placeholder="维保工作内容" rows="5" maxlength="500" show-word-limit style="width:5rem"/>
               </el-form-item>
             </el-form>
           </div>
           <div slot="footer" class="dialog-footer">
             <el-button @click="showLogDialog = false">取消</el-button>
             <el-button type="primary" @click="logSubmit" >确定</el-button>
           </div>
         </el-dialog>

         <!-- 配置日常维保弹框 -->
           <el-dialog :visible.sync="showSetDialog" title="配置日常维保" width="600px" :append-to-body="true" :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="dialog-form-container">
              <el-form class="dialog-form" ref="setForm" size="mini" :rules="setRules" :model="setParams" label-position="right" label-width="80px">
                <el-form-item label="社会单位" required>
                  <div class="gray-color">{{currentRow.deptName}}</div>
                </el-form-item>
                <el-form-item label="维保人员" prop="name">
                  <div class="el-input el-input--mini el-input--suffix" style="cursor: pointer;"  @click="showUserDialog = true">
                    <span class="el-input__inner" style="height: 100%; min-height: 0.35rem;">
                      <span v-if="setParams.userIds && setParams.userIds.length" :title="setParams.userNames.join(',')">{{setParams.userNames.join(',')}}</span>
                      <span v-else class="placeholder">选择维保人员</span>
                    </span>
                    <span class="el-input__suffix"><i class="el-input__icon el-icon-search"></i></span>
                  </div>
                </el-form-item>
                <el-form-item label="提醒时间" prop="notifyDate">
                  <el-select v-model="setParams.notifyDate" placeholder="请选择提醒时间" style="width:100%">
                    <el-option label="前3个月" value="3m" />
                    <el-option label="前1个月" value="1m" />
                    <el-option label="前7天" value="7d" />
                    <el-option label="当天" value="0d" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showSetDialog = false">取消</el-button>
              <el-button type="primary" @click="setSubmit" >确定</el-button>
            </div>
            <!-- 选择维保人员 -->
            <select-user :visible.sync="showUserDialog" @change="userChange" type="repair" :params="{deptId: currentRow.repairDeptId}"/>
          </el-dialog>

          <el-dialog
            :visible.sync="mapDialog"
            :append-to-body="true" 
            :close-on-click-modal="false" :close-on-press-escape="false"
            title="巡检轨迹"
            custom-class="mapDialog"
            width="70%">

            <div id="container" class="mapContainer">
            </div>
          </el-dialog>

         <div class='homeChangeR' @click="isShowAside"><image :src="'/static/'+(isShowFlag?'homeL.png':'homeR.png')" alt=""></div>
        </view>
</template>

<script>
import deviceAlarmHandle from '../homeDialog/deviceAlarmHandle.vue'
import failureDetailDialog from '../homeDialog/failureDetailDialog.vue'
import SelectUser from '../homeDialog/components/SelectUser/index.vue'

import facilitiesFailureHandle from '../homeDialog/facilitiesFailureHandle.vue'
import taskDetail from '../homeDialog/taskDetail.vue'
import monitor from "@/api/monitor/functionsOverview.js"
export default {
   components: {
		  facilitiesFailureHandle,
      deviceAlarmHandle,
      taskDetail,
      failureDetailDialog,
      SelectUser
        },
  data() {
        var renderRightRate = (rate) =>{
            if (rate < 50) {
                return 'transform: rotate(' + 3.6 * rate + 'deg);';
            } else {
                return 'transform: rotate(0);border-color: #02C3FF;';
            }
        }

        var renderLeftRate=(rate)=>{
            if (rate >= 50) {
                return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
            }
        }
    return {
      isShowFlag: false,
      renderRightRate,
      renderLeftRate,
      wifiStatue: "未联网",
      wifiStatueImg: "/static/workR/wifi.png",
      wifiTime: new Date().toISOString(),//现在时间
      hiddenDangerNum: '',
      serviceNum: '',
      inspectNum: '',
      showLogDialog: false,
      showSetDialog: false,
      showUserDialog: false,
       setRules: {
        notifyDate: [{required: true, message: '请选择提醒时间', trigger: 'change'}],
      },
      logParams: {},
      logRules: {
        content: [
          { required: true, message: '请输入维保工作内容', trigger: 'blur'},
          { max: 500, message: '长度不能超过500个字符', trigger: 'blur'}
        ],
      },
      currentRow: {},
      setParams: {},
      
      workOrderList:[],
      pendingList: [],
      listData: [],
      interiorList: [],
      autoplay: true,
      hiddenFlag: true,
      hiddenFlag2: true,
      hiddenFlag3: true,
       loading: false,
      disabled: false,
       page: {
        total: 0,
        currentPage: 1,
        pageSize: 9999
      },
       loading2: false,
      disabled2: false,
       page2: {
        total: 0,
        currentPage: 1,
        pageSize: 9999
      },
       loading3: false,
      disabled3: false,
       page3: {
        total: 0,
        currentPage: 1,
        pageSize: 9999
      },
       listLoading: false,
       listLoading2: false,
       listLoading3: false,


       showHandleDialog: false,
       showHandleDialog2: false,
       //  隐患去处理
      detail: {},
      detail2: {},
      history: [],
      stepMap: {
        'defect_treatment_01': 1, // 隐患上报
        'defect_treatment_02': 2, // 隐患审核
        'defect_treatment_03': 3, // 处理工单
        'defect_treatment_04': 4, // 处理审核
        'finish': 5 // 已完成
      },
      step: 1,
      // 巡检任务明细
      taskRadio: "todo",
      taskFlag: false,
      taskId: "",
      deptId: "",
      wbOrderCode:'',
      showDetailDialog: false,
      status: 'waitHandle',
      userInfo:{},
      userDept:{},

      mapDialog:false,

    };
  },
   async created(){
			
		 let netWorkFlag= await this.$help.getNetWork()
		 if (netWorkFlag) {
      this.wifiStatue='已联网'
      this.wifiStatueImg='/static/workR/wifi2.png'
     }else{
      this.wifiStatue= "未联网"
      this.wifiStatueImg="/static/workR/wifi.png"
     }
      
	  let self=this
	  //刷新
	  uni.$on('globalRefresh',function(data){
		self.wifiTime=new Date().toISOString()
	  	self.userInfoGet()
		self.init()
	  })
        },
  mounted() {
     this.userInfoGet()
     this.init()
		},
  computed:{
     noMore() {
      //当起始页数大于总页数时停止加载
      return this.pendingList.length >= this.page.total;
    },
     noMore2() {
      //当起始页数大于总页数时停止加载
      return this.interiorList.length >= this.page2.total;
    },
     noMore3() {
      //当起始页数大于总页数时停止加载
      return this.interiorList.length >= this.page2.total;
    },
     
  },
 
  methods: {
     // 显示或隐藏侧边栏
    isShowAside() {
      this.isShowFlag = !this.isShowFlag;
    },
    // 登录时间转换
    dateFormat(time) {
	    let date = new Date(time);
	    let year = date.getFullYear();
	    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
	    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
	    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
	    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	    // 拼接
	    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
	    // return year + "-" + month + "-" + day;
	},
    userInfoGet(){
   this.userDept=JSON.parse(uni.getStorageSync('user'))
    this.deptId= this.userDept.userDeptId
   
		},
    // 初始化
    init() {
      this.getFindFacilityOrderPage()
      this.getInteriorList()
      this.getUnAssignWorkOrder()
      this.getHiddenDangerStatistics()
      this.getInspectNum()
      this.getServiceNum()
      this.reset()
      // this.getUrgeRecordNum()
      // this.getPendingWorkOrderNum()
      // this.getOverviewDeptNum() 
      // this.getDeviceStatusNum()
      // this.getListDeviceAlarmDispose('0')
      // this.getListDeviceAlarmDispose('1')
      // this.getListDeviceAlarmDispose('4')
    },
     // 重置
    reset() {
      this.disabled = false;
      this.disabled2 = false;
      this.disabled3 = false;
    }, 
     // 处理完成率,处理大于100转变为100，去掉小数点取整数
    format(percentage) {
      var percentage2 = percentage >> 0;
      return percentage2 > 100 ? `${100}%` : `${percentage2}%`;
    },
    restPage() {
      this.page.total = 0
      this.page.currentPage = 1
      this.page.pageSize = 9999
      this.pendingList = []
     this.disabled = false;
    },
    restPage2() {
      this.page2.total = 0
      this.page2.currentPage = 1
      this.page2.pageSize = 9999
      this.interiorList = []
      this.disabled2 = false;
    },
    restPage3() {
      this.page3.total = 0
      this.page3.currentPage = 1
      this.page3.pageSize = 9999
      this.workOrderList = []
      this.disabled3 = false;
    },
      
    // 隐患去处理
    async disposal(hidden,row){
         
         if (hidden == true) {
        this.step = this.stepMap[row.actNodeCode]
        if (row.handleMethod === 2) {
        // 现场处理工单详情
         let res = await monitor.getSiteOrderDetails({ id: row.id })
          
            this.detail = res.data
            this.history = []
          
        } else {
        // 获取审核的历史纪录
           let res = await monitor.getAuditDetails({ id: row.id })
            this.detail = row
            this.history = res.data
        
        }
        this.$nextTick(() => {

          this.showHandleDialog = true
        })

      } else if (hidden == false) {
        this.step = this.stepMap[row.actNodeCode]
        if (row.handleMethod === 2) {
        // 现场处理工单详情
           let res = await monitor.getSiteOrderDetails({ id: row.id })
            this.detail = res.data
            this.history = []
         
        } else {
        // 获取审核的历史纪录
           let res = await monitor.getAuditDetails({ id: row.id })
            this.detail = row
            this.history = res.data
         
        }
        this.showHandleDialog2 = true
      }

    },
    
    changeHiddenFlag(val) {
      if (val == 1) {
        this.hiddenFlag = true;
        this.restPage()
        this.getFindFacilityOrderPage()
      } else {
        this.hiddenFlag = false;
        this.restPage()
        this.getFindDeviceOrderPage()
      }
    },
    changeHiddenFlag2(val) {
      if (val == 1) {
        this.hiddenFlag2 = true;
         this.restPage2()
        this.getInteriorList()
      } else {
        this.hiddenFlag2 = false;
        this.restPage2()
        this.getOutdoorList()
      }
    },
    changeHiddenFlag3(val) {
      if (val == 1) {
        this.hiddenFlag3 = true;
        this.restPage3()
         // 故障维修
        this.getUnAssignWorkOrder()
      } else {
        this.hiddenFlag3 = false;
        this.restPage3()
        // 日常维保
        this. getMaintenanceList()
      }
    },
    // 待处理隐患选择
    //加载事件,设置一个分页的初始化值
    async loadMore() {
       this.page.currentPage++;
       this.loading = true
      if(this.hiddenFlag==true){
          let res = await monitor.findFacilityOrderPage(Object.assign({
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          // type: '3'
        }))
          this.page.total = res.data.total
          //没数据了,不可再下拉
          if (res.data.hasNextPage == false) {
            this.disabled = true
          } else {
            this.pendingList = this.pendingList.concat(res.data.list)
          }
          this.loading = false
      
      }else{
          let res = await monitor.findDeviceOrderPage(Object.assign({
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          // type: '3'
        }))
          this.page.total = res.data.total
          //没数据了,不可再下拉
          if (res.data.hasNextPage == false) {
            this.disabled = true
          } else {
          
            this.pendingList = this.pendingList.concat(res.data.list)
        
          }
          this.loading = false
      }

    },
     // 待巡检任务选择
    async loadMore2() {
      this.page2.currentPage++;
      this.loading2 = true
      if (this.hiddenFlag2==true) {
         let res = await monitor.getInterior(Object.assign({
          pageNum: this.page2.currentPage,
          pageSize: this.page2.pageSize,
          inoutFlag: 1
        }))
          this.page2.total = res.data.total
          //没数据了,不可再下拉
          if (res.data.isLastPage) {
            this.disabled2 = true
          } else {
            this.interiorList = this.interiorList.concat(res.data.list)
          }
          this.loading2 = false
      } else {
         let res = await monitor.getInterior(Object.assign({
          pageNum: this.page2.currentPage,
          pageSize: this.page2.pageSize,
          inoutFlag:2
        }))
          this.page2.total = res.data.total
          //没数据了,不可再下拉
          if (res.data.isLastPage) {
            this.disabled2 = true
          } else {
            this.interiorList = this.interiorList.concat(res.data.list)
          }
          this.loading2 = false
      }
    },
     // 巡检任务明细
    detailShow(row) {
      this.taskId = row.id;
      this.deptId = row.deptId;
      this.taskFlag = true;
    
      
    },
     // 待处理工单
     disposal2(hidden, row) {
      this.wbOrderCode = ''
      if (hidden==true) {
        this.status = 'waitHandle'
        this.detail2 = row
        this.showDetailDialog = true
        this.wbOrderCode = row.wbOrderCode
        
        this.$refs.detailDialogOne.openDetailDialogOne(row.wbOrderCode)
      } else {
        this.currentRow = row
        this.showSetDialog = true
        this.setParams = {
          id: row.id,
          userIds: row.userIds,
          userNames: row.userNames,
          notifyDate: row.notifyDate
        }
      }
    },
     disposal3(hidden, row) {
        this.currentRow = row

      if(row.state === '2') {
        return this.$message.warning('该单位已维保！')
      }
      if(!row.userNames||row.userNames.length==0){
        return this.$message.warning('请先配置日常维保工单的维保人员！')
      }

      this.showLogDialog = true
      this.logParams = {
        content: '',
        sheetId: row.id,
        repairContractId: row.contractId,
        deptId: this.userDept.userDeptId,
        userId: this.userDept.userId,
      }
    },
     // 监听人员选择
    userChange(val) {
      this.setParams.userIds = val.map(item => item.userId)
      this.setParams.userNames = val.map(item => item.realName)
    },
    // 配置维保提交
    setSubmit() {
      this.$refs['setForm'].validate((valid) => {
        if (valid) {
         monitor.updateRepairSheet(this.setParams).then(res => {

            this.showSetDialog = false
            if(res.code==1){
              this.$message.error(res.msg)
            }else{
                this.$message.success('日常维保配置成功！')
            }
           this.getMaintenanceList()
          }).catch(() => { this.showSetDialog = false })
        }
      })
    },
     //维保记录提交
    logSubmit() {
      debugger
      this.$refs['logForm'].validate((valid) => {
        console.log(valid);
        if (valid) {
         monitor.addRepairRecord(this.logParams).then(res => {
           if(res.code==1){
             this.$message.error(res.msg)
            }else{
              this.$message.success('日常维保记录添加成功！')
            }
            this.showLogDialog = false
         
            this.getMaintenanceList()
          }).catch(() => this.showLogDialog = false)
        }
      })
    },
    // 设施故障
    async getFindFacilityOrderPage() {
      this.listLoading = true
      let res = await monitor.findFacilityOrderPage({
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
        // type: '3'
      })
       if(res.code==0){
         this.pendingList = res.data.list || []
         this.listLoading = false
       }else{
        this.listLoading = false
       }
    },
    // 设备告警
    async getFindDeviceOrderPage() {
      this.listLoading = true
      let res = await monitor.findDeviceOrderPage({
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
        // type: '3'
      })
       if(res.code==0){
         this.pendingList = res.data.list || []
         this.listLoading = false
       }else{
        this.listLoading = false
       }
    },
    //  巡检数量
    async getInspectNum() {
      let res = await monitor.getInterior({
        pageNum: this.page2.currentPage,
        pageSize: this.page2.pageSize,
      })
       if(res.code==0){
           this.inspectNum = res.data.total
       }else{
       }
    },
   
    // 室内路线数列
    async getInteriorList() {
      this.listLoading2 = true
      let res = await monitor.getInterior({
        pageNum: this.page2.currentPage,
        pageSize: this.page2.pageSize,
        inoutFlag: 1
      })
       if(res.code==0){
         this.interiorList = res.data.list || []
         this.listLoading2 = false
       }else{
        this.listLoading2 = false
       }
    },
   
    // 室外路线数列
    async getOutdoorList() {
      this.listLoading2 = true
      let res = await monitor.getInterior({
        pageNum: this.page2.currentPage,
        pageSize: this.page2.pageSize,
        inoutFlag: 2
      })
       if(res.code==0){
         this.interiorList = res.data.list || []
         this.listLoading2 = false
       }else{
        this.listLoading2 = false
       }
    },

    // 故障维修
    async getUnAssignWorkOrder() {
      this.listLoading3 = true
      let res = await monitor.unAssignWorkOrder({
        pageNum: this.page3.currentPage,
        pageSize: this.page3.pageSize,
      })
       if(res.code==0){
         this.workOrderList = res.data.list || []
         this.listLoading3 = false
       }else{
        this.listLoading3 = false
       }
    },
    // 维修数量
    async getServiceNum() {
      let res = await monitor.unAssignWorkOrder({
        pageNum: this.page3.currentPage,
        pageSize: this.page3.pageSize,
      })
       if(res.code==0){
         this.serviceNum = res.data.total
       }else{
       }
    },
    // 日常维保
    async getMaintenanceList() {
      this.listLoading3 = true
      let res = await monitor.getMaintenance({
        pageNum: this.page3.currentPage,
        pageSize: this.page3.pageSize,
        status: '1'
      })
       if(res.code==0){
         this.workOrderList = res.data.list || []
         this.listLoading3 = false
       }else{
        this.listLoading3 = false
       }
    },
    // 隐患数量
    async getHiddenDangerStatistics() {
      let res = await monitor.hiddenDangerStatistics({
          type: '1'
      })
       if(res.code==0){
         this.hiddenDangerNum = res.data
       }
    },
     // 联网单位，设备数量
    async getOverviewDeptNum() {
       let res = await monitor.getOverviewDeptNum()
        console.log(res);
    },

    inspection(row){
      this.mapDialog=true
      this.$nextTick(function (){
        monitor.getInspectLineDetail(row.inspectionLineId).then((res) => {
            if (res.data) {
              let list=[]
              res.data.facilityList.forEach(function (itm,ind){
                if(itm.longitude){
                  list.push(itm.longitude.split(','))
                }
              })
              let mapStyle="amap://styles/" + "117f36d1e643cfd46d21660d866df29e"
              var map = new AMap.Map('container', {
                center: list[0],
                zoom: 14,
                mapStyle: mapStyle, //设置地图的显示样式
              })
              // map.setMapStyle(mapStyle);

              var markers=[]
              list.forEach(function (itm,ind){
                let text=ind==list.length-1?'终':ind+1
                let markerContent ='<div class="custom-content-marker">' +
                  '   <div class="close-btn"">'+text+'</div>' +
                  '</div>';
                // let markerContent ='<div class="custom-content-marker">' +
                //   '   <image src="/static/workR/inspectIcon.png">' +
                //   '   <div class="close-btn"">'+text+'</div>' +
                //   '</div>';
                let marker=new AMap.Marker({
                  position: itm,
                  // offset: new AMap.Pixel(-10, -10),
                  // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // 添加 Icon 实例
                  // 将 html 传给 content
                  content: markerContent,
                })
                markers.push(marker)
              })
              map.add(markers);
              // 创建折线实例
              var polyline = new AMap.Polyline({
                path: list,
                // borderWeight: 12, // 线条宽度，默认为 1
                strokeColor: '#50E3C2', // 线条颜色
                lineJoin: 'round', // 折线拐点连接处样式
                lineCap: 'round',//
                showDir:true,//
                dirColor:'#fff',//箭头颜色
                // dirImg:canvasDir,
                strokeWeight: 12,// 线宽
                // outlineColor: '#FFFF00',//
                strokeOpacity: 1,
              });

              // 将折线添加至地图实例
              map.add(polyline);

            }
          })
          .catch((err) => (console.log(err)));
      })
    },
   
  },
};
</script>

<style lang="scss" scoped>
.circle0 /deep/ {
  // border:0.01rem #00b7ff82 solid;
  // border-radius: 50%;
  // padding: 0.04rem;
  .el-progress__text {
    background-image: -webkit-linear-gradient(
      bottom,
      #00DFEF,
      #007CFF,
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 15px;
  }
  svg > path:nth-child(2) {
    stroke: url(#write);
  }
  .el-progress-circle__track {
    stroke:  #0B3B61;
    opacity: 0.4;
  }
}

.circle3 {
    width: 0.6rem;
    height: 0.6rem;
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.06rem #02C3FF;

    .ab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    &_left {
        border: 0.07rem solid #0B3B61;
        border-radius: 50%;
        clip: rect(0, 0.3rem, 0.6rem, 0);
    }

    &_right {
        border: 0.07rem solid #0B3B61;
        border-radius: 50%;
        clip: rect(0, 0.6rem, 0.6rem, 0.3rem);
    }

    &_text {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color:rgba(2, 195, 255, 1);
        font-size: 0.16rem;
        font-weight: 600;


    .value{
       font-size: 0.1rem;
        font-weight: 300;
        padding-top: 0.04rem;
    }
    }
}

::-webkit-scrollbar-track-piece {
    background-color:rgba(2, 196, 255, 0)!important;
}
::-webkit-scrollbar-thumb {
        background-color: rgba(2, 195, 255, 0.2000)!important;
         cursor: pointer;
        }
::-webkit-scrollbar {
  
    background-color:rgba(2, 196, 255, 0)!important; 
}
::-webkit-scrollbar-track-piece {
   background-color:rgba(2, 196, 255, 0)!important; 
}
::-webkit-scrollbar-track {
   
    background-color:rgba(2, 196, 255, 0)!important;
}
 .h-right-active2 {
    transform: translateX(5.12rem);
   
  }
.work-order {
  position: absolute;
  right:0;
  z-index: 1;
  top: 80px;
  width: 5.12rem;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 0.12rem;
  padding-top: 0.2rem;
  background: linear-gradient(to right,rgba(5, 25, 45, 0), rgba(5, 25, 41, 0.6000), rgba(3, 26, 44, 0.9400),rgba(2, 27, 45, 1));
  transform: translateX(0);
  transition: 0.5s;
  .homeChangeR {
      cursor: pointer;
      position: absolute;
      top: 48%;
      right: 5.3rem;
      padding-left: 0.625rem;
      image {
        width: 0.5625rem;
      height: 0.5625rem;
      }
    }
  .no-data-list{
    width: 100%;
    height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  }
  .no-data {
    margin: 0 auto;
    text-align: center;
    color:rgba(255, 255, 255,0.6) ;
    font-size: 0.15rem;
  }
  .no-data-image{
    text-align: center;
    width:2rem;
    height:1rem;
  }
  // width: 5rem;
  // height: 564px;
  // background-color: rgba(0, 22, 39, 0.85);
  // padding: 17px 20px 25px 20px;
  font-size: 14px;
  .head-wifi {
    display: flex;
    justify-content: space-around;
    align-items: center;
    // padding: 0.13rem;
    background:  rgba(19,117,216,0.1);
    backdrop-filter: blur(4px);
    .head-wifi-left {
      display: flex;
      align-items: center;
    }
    .wifi-title {
      font-size: 0.175rem;
    }
    .wifi-image {
      width: 0.25rem;
      height: 0.25rem;
      margin-right: 0.06rem;
    }
    .wifi-time{
      font-size: 0.18rem;
      color: #FFFFFF;
      opacity: 0.7;
    }
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.0125rem solid #02C3FF;
    margin-bottom: 0.14rem;
    .left {
      display: flex;
      align-items: center;
      // border-bottom: 2px solid #1BCEFF;
      padding-bottom: 0.1375rem;
      .image {
        margin-right: 0.125rem;
        width: 0.0875rem;
        height: 0.2rem;
      }
      .title {
        display: inline-block;
        font-size: 0.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 0.275rem;
      }
    }
  }
  .content {
    background: rgba(19,117,216,0.1);
    backdrop-filter: blur(4px);
    height:60%;
    padding: 0.16rem 0.31rem;
    .content-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content-item {
        display: flex;
        align-items: center;
      }
      .content-line {
        width: 0.01rem;
        height: 0.45rem;
        background: linear-gradient(
          244deg,
          rgba(19, 230, 229, 0) 0%,
          rgba(19, 230, 229, 1) 50%,
          rgba(19, 230, 229, 0) 100%
        );
        opacity: 0.5;
      }
    }
  }
  .tickets {
    .content{
       padding: 0.12rem 0.3rem;
    }
    // height:  calc(100% - 0.1rem);
    margin-bottom: 0.04rem;
    .icon-image {
      width: 0.53rem;
      height: 0.53rem;
    }
    .tickets-list {
      display: flex;
      flex-direction: column;
      // justify-content : center;
      align-items: center;
    }
    .tickets-num {
      font-size: 0.33rem;
      font-family: DIN-BoldItalic, DIN;
      font-weight: normal;
      color: #02c3ff;
    }
    .tickets-title {
      // text-align: center;
      font-size: 0.15rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  .hidden-danger {
      margin-bottom: 0.04rem;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .hidden-right {
      display: flex;
      justify-content: space-around;
      margin-bottom: 0.11rem;
      .hidden-btn {
        width: 1.13rem;
        height: 0.35rem;
        background: rgba(0, 20, 44, 0.43);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.13rem;
        cursor: pointer;
      }
      .hidden-btn-check {
        box-shadow: inset 0rem 0rem 0.06rem 0rem #00b7ff;
        border: 0.01rem solid #02c3ff;
        .hidden-title {
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #02c3ff;
        }
      }
      .hidden-btn-out {
        box-shadow: inset 0rem 0rem 0.06rem 0rem rgba(0, 183, 255, 0.44);
        .hidden-title {
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .hidden-image {
        width: 0.24rem;
        height: 0.24rem;
      }
    }
    .content {
      padding: 0.13rem 0  0.13rem 0.19rem;
    }
  }
  .pendingWarp {
    // height: 2rem;
	height: 100%;
    //  overflow-y: hidden;
    margin-right: 0.06rem;
    overflow-y: auto;
	overflow-x: hidden;
  }
  //  .pendingWarp:hover{
  //    height:300px;
  //    overflow-y: auto;
  //    margin-right:0.125rem;

  //  }
  .pendingList {
    margin-right: 0.05rem;
    margin-bottom:0.13rem;
    border-bottom: 0.01rem solid rgba(61, 230, 255, 0.1);
    // border-image: linear-gradient(180deg, rgba(112, 244, 255, 0.1), rgba(61, 230, 255, 0.1)) 0.01 0.01;
    .pendingListTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.13rem;
      .pendingListTitleBtnL{
       display: flex;
      justify-content: space-between;
        height: 0.38rem;
        .pendingListTitleBtn:first-child{
          margin-right: 0.1rem;
        }

      }
      .pendingListTitleBtn {
        // height: 0.38rem;
        padding: 0.06rem 0.1rem;
        // background: url("/static/workR/redBtn.png") no-repeat left center;
        // background-size: 100% 100%;
        box-shadow: inset 0rem 0rem 0.06rem 0rem rgba(255, 61, 61, 0.5000);
        border: 0.01rem solid rgba(255, 61, 61, 0.5000);
        border-radius: 0.05rem;
        text-align: center;
        color: #ff3d3d;
        font-size: 0.18rem;
        cursor: pointer;
      }
      .pendingListTitleName {
        font-size: 0.18rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-bottom: 0.0625rem;
      
      }
      .pendingListTitleName2 {
        font-family: PingFangSC-Light, PingFang SC;
        color: #FFFFFF;
        margin-bottom: 0.0625rem;
        font-size:0.15rem;
        font-weight: 300; 
         opacity: 0.8;
      }
      .pendingListTitleId {
        font-size: 0.15rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #FFFFFF;
        opacity: 0.8;
      }
      .pendingListTitleFinish {
        .textFinish{
          font-size: 0.15rem;
          margin-right: 0.125rem;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          line-height: 0.21rem;
        }
        display: flex;
        align-items: center;
        // text {
        //   margin-right: 0.125rem;
        // }
        .finishMain {
          position: relative;
          // border:0.01rem #00b7ff82 solid;
          // border-radius: 50%;
          // padding: 0.04rem;
          .finishTitle {
            font-size: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .pendingListCenter {
      padding:0.15rem 0.25rem;
     background: rgba(39,130,202,0.2);
     border-radius: 0.08rem;
    //  opacity: 0.4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .pendingListItemName {
        font-size: 0.15rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #FFFFFF;
        margin-bottom: 0.03rem;
        opacity: 0.6;
      }
      .pendingListItemMsg2{  font-size: 0.25rem;
       text {
        margin-left: 0.06rem;
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
        }
      }
      .pendingListItemMsg {
        font-size: 0.18rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;

        text {
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .pendingListFoot {
      vertical-align: middle;
      font-size: 0.18rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      padding-top: 0.1rem;
      margin-bottom: 0.12rem;
     .footText{
      opacity: 0.6;
     }
      .imageFoot {
        height: 0.25rem!important;
        width: 0.25rem!important;
        vertical-align: middle;
        margin-right: 0.125rem;
      }
       .reportFoot{
            display: flex;
            align-items: center;
            text{
              opacity: 0.6;
            }
          }
      .footTop {
        
        view {
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          opacity: 0.8;
         text{
          opacity: 0.6;
         }
        }
        
      }
      .footBottom {
        padding-top: 0.068rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
          vertical-align: middle;
          height: 0.375rem;
          width: 0.375rem;
          margin-right: 0.0625rem;
        }
        view {
          vertical-align: middle;
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 0.175rem;
        }
      }
    }
  }
}
</style>